<!-- 部门树 -->
<template>
	
	<div class="pane">
		<div class="head" style="display: flex;justify-content: space-between;align-items: center;">
			<span>分组</span>
			<div style="padding-right: 8px;display: flex;justify-content: center;align-items: center;color: var(--el-color-primary);;">
				<el-button type="primary" icon="FolderAdd" />
			</div>
		</div>
		<div class="body">
			<div style="margin-bottom: 5px;">
				<el-input v-model="deptName" placeholder="数据源名称" clearable>
				  <template #prefix>
				    <el-icon><Search /></el-icon>
				  </template>
				</el-input>
			</div>
			<el-scrollbar height="calc(100vh - 225px)">
				<el-tree
				ref="deptTreeRef"
				class="mt-2"
				:data="deptList"
				:expand-on-click-node="false"
				:filter-node-method="handleFilter"
				default-expand-all
				@node-click="handleNodeClick"
				:props="defaultProps"
				/>
			</el-scrollbar>
			
		</div>
	</div>
	
<!-- <el-card shadow="never">
	<template #header>
		<div class="card-header">
	        <span>部门</span>
		</div>
	</template>  
	

	
	
  </el-card> -->
</template>

<script setup lang="ts">
	defineOptions({
	  name: "DatasourceGroup",
	  inheritAttrs: false,
	});
	
	
import DeptAPI from "@/api/system/dept";
const props = defineProps({
  modelValue: {
    type: [Number],
    default: undefined,
  },
});
import {
  recurOptions
} from "@/utils/TreeUtil";
const deptList = ref<OptionType[]>(); // 部门列表
const deptTreeRef = ref(ElTree); // 部门树
const deptName = ref(); // 部门名称
const defaultProps = {
  children: 'children',
  label: 'name',
  value:'id',
  disabled:''
}
const emits = defineEmits(["node-click"]);

const deptId = useVModel(props, "modelValue", emits);

watchEffect(
  () => {
    deptTreeRef.value.filter(deptName.value);
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);

/**
 * 部门筛选
 */
function handleFilter(value: string, data: any) {
  if (!value) {
    return true;
  }
  return data.label.indexOf(value) !== -1;
}

/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
  deptId.value = data.value;
  emits("node-click");
}

onBeforeMount(() => {
  DeptAPI.getOptions().then((data) => {
    deptList.value = recurOptions(data,'-1');
  });
});
</script>
<style lang="scss" scoped>
</style>
